<template>
	<w-container id='market-details' :loading='loading' class="bg-color-pageBg">
		<w-navbar :placeholder="false" :titleStyle="{color:opacity>0.8?'#222':'#fff'}" :opacity="opacity"
			:leftIcon="opacity>0.8?'arrow-left-back':'arrow-left-back'" navType="goods" :title="pageTitle" :bgColor="bgColor"
			:product="product" @likeChange='likeChange'>
		</w-navbar>
		<w-product-details-card :product='product'>
			<!-- <view class="font-color-white flex flex-ai-center font-size-12" slot='right' @click="rightAction">
				{{product.goods_type==1? '开盒记录':"其他寄售"}}
				<w-icon class='ml-4' name="arrow-right-white"></w-icon>
			</view> -->
		</w-product-details-card>
		<view style="background-color: #1f1f1f;">
			<!-- 藏品故事 -->
			<w-product-introduce :product='product'></w-product-introduce>
			<u-gap height="100rpx"></u-gap>
			<!-- 商品介绍 -->
			<w-product-detail :product='product'></w-product-detail>
		</view>
		<!-- 盲盒藏品 -->
		<w-product-box v-if="product.goods_type==1" :product='product'></w-product-box>
		<!-- 创作者信息及品牌方信息 -->
		<w-product-builder v-else :product='product'></w-product-builder>
		<!-- 商品编号 -->
		<w-product-number v-if="product.goods_type!=1" class='mt-12' :code='code' :id='info.user_collection.id'>
		</w-product-number>
		<!-- 商品信息 -->
		<w-product-info-list class='mt-12' :info='showInfo'></w-product-info-list>
		<!-- 商品介绍 -->
		<!-- <w-product-introduce class='mt-12' :product='product'></w-product-introduce> -->
		<!-- 购买须知 -->
		<w-product-buy-need class='mt-12' :product='product'></w-product-buy-need>
		<!-- 版权 -->
		<!-- <w-copyright></w-copyright> -->
		<u-gap height="100"></u-gap>
		<w-market-action :info='info' @finish="getInfo"></w-market-action>
	</w-container>
</template>

<script>
	import {
		getMarketDetails
	} from '@/api/market/index.js'
	import opacityMixin from '@/mixins/opacityNav.js'
	export default {
		mixins: [opacityMixin],
		data() {
			return {
				id: null,
				loading: false,
				info: {
					product: {
						publisher: {},
						collection_list: [],
					},
					user: {},
					user_collection: {}
				}
			};
		},
		onLoad({
			id
		}) {
			this.id = id;
			// console.log(id,'id的值');
		},
		onShow() {
			this.getInfo();
		},
		computed: {
			product() {
				return {
					...this.info.product,
					price: this.info.price,
					goods_type: this.info.goods_type
				}
			},
			code() {
				return this.info.user_collection.collection_code
			},
			showInfo() {
				return {
					series_name: this.info.series_name,
					real_hash: this.info.user_collection.user_hash,
					user_hash: this.info.user_collection.user_hash_text,
					rz_code: this.info.user_collection.rz_code,
					nickname: this.info.user ? this.info.user.nickname : ''
				}
			}
		},
		methods: {
			rightAction() {
				if (this.product.goods_type == 1) {
					this.$u.route('/pages/blindBox/openRecord', {
						id: this.product.id
					})
				} else {
					this.backPage()
				}
			},
			likeChange(type) {
				this.info.product.is_like = type
			},
			getInfo() {
				if (this.loading) return;
				this.loading = true;
				getMarketDetails(this.id).then(res => {
					this.info = res.data;
					this.info.product.goods_type = res.data.goods_type
					this.info.product.price = res.data.price
					this.loading = false;
				}).catch(e => {
					setTimeout(() => {
						this.backPage();
					}, 1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	#market-details {
		padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);

	}
</style>